<template>
  <div class="container">
    <!-- <img style="height: 100%; width: 100%;" :src="singerMessage.picUrl" alt=""> -->
    <div @click="returnBack" class="arrow">
      <van-icon name="arrow-left" />
    </div>
    <div ref="bgImage" class="bgImg" style="height: 100%; width: 100%;" :style="bgStyle"></div>
    <div class="message">
     <p class="name">{{singerMessage.name}}</p>
     <p class="text">歌手榜华语地区&nbsp;NO.27</p>
     <p class="text">关注&nbsp;36&nbsp;&nbsp;|&nbsp;&nbsp;粉丝&nbsp;10.8万</p>
     <p class="text">网易音乐人</p>
    </div>
  </div>
</template>

<script>
import Bus from '../../../../util/bus.js'
export default {
  name: 'SingerListMessage',
  mounted() {
    this.imageHeight = this.$refs.bgImage.clientHeight
    Bus.$emit('height',this.imageHeight)
  },
  props: {
    singerMessage: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    returnBack() {
      this.$router.go(-1)
    }
  },
  computed: {
    bgStyle() {
      return `background-image:url(${this.singerMessage.picUrl})`
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    height: 800px;
    position: relative;
    transform-origin: top;
    .arrow {
      position: absolute;
      top: 10px;
      left: 10px;
      color: #fff;
      z-index: 111111;
    }
    .bgImg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
    }
    .message {
      position: absolute;
      bottom: 60px;
      left: 30px;
      color: #fff;
      .name {
        font-size: 45px;
        font-weight: bold;
        line-height: 80px;
      }
      .text {
        font-size: 30px;
        font-weight: 200;
        // opacity: .8;
        line-height: 50px;
      }
    }
  }
</style>